<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>快递扫描架</title>
  <style>
    div {
      position: relative;
      height: 400px;
      /* 定义传送条和物流包裹 */
      background-image:
        /* //物流包裹渐变色 */
        linear-gradient(to right, transparent 30%, #d2b48c 30%, #d2b48c 47%, #ddc7a9 47%, #ddc7a9 53%, #d2b48c 53%, #d2b48c 70%, transparent 70%),
        /* //传送带正中心预留阴影 */
        linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.3) 80%, transparent),
        /* //传送带链条上端 */
        linear-gradient(45deg, #bbb 22%, #888 22%, #888 25%, #bbb 25%, #bbb 75%, #888 75%, #888 78%, #bbb 78%),
        /* //传送带中心链接处圆点 */
        radial-gradient(circle, #888 8px, rgba(255, 255, 255, 0.9) 8px, rgba(255, 255, 255, 0.9) 11px, transparent 11px),
        /* //传送带链条下端 */
        linear-gradient(-45deg, #bbb 22%, #888 22%, #888 25%, #bbb 25%, #bbb 75%, #888 75%, #888 78%, #bbb 78%),
        /* //传动带中心链接 */
        linear-gradient(to bottom, #666 50%, #555 50%);

      background-size: 200px 70px, 290px 11.5%, 200px 7px, 100px 30px, 200px 7px, 200px 10%;
      background-position: 50% 56.2%, 50% 72.2%, 0 65%, 50% 71%, 0 75%, 0 72%;
      background-repeat: repeat-x, no-repeat, repeat-x, repeat-x, repeat-x, repeat-x;



    }

    /* 定义扫描框 */
    div:before,
    div:after {
      display: block;
      content: '';
      position: absolute;
    }

    /* 静止部分（扫描框） */
    div:before {
      width: 200px;
      height: 202px;
      left: 50%;
      margin-left: -100px;
      top: 27%;
      background-image:
        /* 框内阴影 */
        linear-gradient(165deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%),
        /* 框内底色 */
        linear-gradient(to right, #002525, #002525),
        /* 框外底部条 */
        linear-gradient(to right, transparent 20%, #1aa093 20%, #1aa093 40%, transparent 40%, transparent 60%, #1aa093 60%, #1aa093 80%, transparent 80%),
        /* 框下部分圆点 */
        radial-gradient(circle, #1ba99b 50%, transparent 50%),
        radial-gradient(circle, #1ba99b 50%, transparent 50%),
        radial-gradient(circle, #1ba99b 50%, transparent 50%),
        /* 外框底色 */
        linear-gradient(to bottom, #40e0d0 90%, #21ccbb 90%);
      background-size: 164px 130px, 170px 130px, 100% 10px, 16px 16px, 16px 16px, 16px 16px, 100% 100%;
      background-position: 50% 27%, 50% 22%, 50% 100%, 70% 85%, 80% 85%, 90% 85%, 0 0;
      background-repeat: no-repeat;
      border-radius: 10px 10px 3px 3px;
      border-top: 3px solid #21ccbb;
    }

    div:after {
      width: 170px;
      height: 130px;
      left: 50%;
      margin-left: -85px;
      top: 38%;
      background-image:
        /* 左侧标识组合1 */
        linear-gradient(to right, white, white),
        /* 左侧标识组合2 */
        repeating-linear-gradient(to bottom, white, white 2px, transparent 2px, transparent 12px),
        /* 包裹框整体底色 */
        linear-gradient(to right, transparent 30%, #10635a 30%, transparent 40%, transparent 60%, #10635a 70%, transparent 70%),
        /* 三排正方形格子颜色 */
        linear-gradient(to right, transparent 35%, #1aa093 34%, #1aa093 44%, transparent 44%, transparent 45%, #21ccbb 45%, #21ccbb 55%, transparent 55%, transparent 56%, #168a7f 56%, #168a7f 65%, transparent 65%),
        linear-gradient(to right, transparent 35%, #1eb6a7 34%, #1eb6a7 44%, transparent 44%, transparent 45%, #1aa093 45%, #1aa093 55%, transparent 55%, transparent 56%, #21ccbb 56%, #21ccbb 65%, transparent 65%),
        linear-gradient(to right, transparent 35%, #168a7f 34%, #168a7f 44%, transparent 44%, transparent 45%, #1aa093 45%, #1aa093 55%, transparent 55%, transparent 56%, #1eb6a7 56%, #1eb6a7 65%, transparent 65%),
        /* 包裹框整体前色 */
        linear-gradient(to right, transparent 30%, #003e3f 30%, #003e3f 70%, transparent 70%);
      background-size: 2px 50px, 8px 50px, 200px 70px, 200px 18px, 200px 18px, 200px 18px, 200px 70px;
      background-position: 15px 40px, 16px 40px, 50% 56%, 50% 40%, 50% 58%, 50% 76%, 50% 56%;
      background-repeat: no-repeat, no-repeat, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x;
    }

    @keyframes moveDiv {
      to {
        background-position-x: calc(50% + 200px), 50%, 200px, 50%, -200px, 0
      }
    }

    @keyframes moveAfter {
      to {
        background-position-x: 15px, 16px, calc(50% + 200px), calc(50% + 200px), calc(50% + 200px), calc(50% + 200px), calc(50% + 200px)
      }
    }

    div {
      animation: moveDiv 2000ms linear infinite;
      transform: scale(1);
      width: 100vw;
    }

    div:after {
      animation: moveAfter 2000ms linear infinite;
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>